<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OTC交易所</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/background.css">
    <link rel="stylesheet" href="./css/color.css">
    <link rel="stylesheet" href="./css/margin.css">
    <link rel="stylesheet" href="./css/wtlotc.css">
</head>
<body >
<!--顶部导航-->
<div class="l-nav">

    <div class="l-container">
        <!--logo-->
        <div class="l-logo">
            <img class="l-img" src="./image/wtlogo.png" alt="无法显示" />
        </div>

        <!--菜单栏-->
        <ul class="layui-nav l-line-none" lay-filter="">
            <li class="layui-nav-item"><a href="">首页</a></li>
            <li class="layui-nav-item"><a href="">账户中心</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">语言</a>
                <dl class="layui-nav-child">
                    <dd><a href="#"><img src="./image/China.png" alt=""> 中文</a></dd>
                    <dd><a href="#"><img style="width: 29px; height: 18px;" src="./image/usa.jpg" alt=""> 英语</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item l-login-out"><a href="">欢迎您：kingend</a><span>退出</span></li>
        </ul>
    </div>
</div>

<!--主体部分-->
<div class="l-container" id="main">
    <!--信息-->
    <div>
        <div class="l-tips-content l-tips-flex">
            <div class="l-tips-big "><img src="./image/wtl.png" alt=""> Tether USDT 对 CNY</div>
            <!--下拉选择菜单-->
            <div  id="country" class="layui-form l-tips-inline">
                <select name="city" lay-filter="country" lay-verify="required">
                    <option value="WTL" >WTL</option>
                    <option selected value="CNY">CNY</option>
                    <option value="USDT">USDT</option>
                    <option value="BTC">BTC</option>
                    <option value="ETH">ETH</option>
                </select>
            </div>
        </div>
        <p>
            <span class="l-color-gray">实时价：</span><span class="l-margin-10">￥6.53</span><span class="l-color-gray">日涨价：</span><span class="l-color-green l-margin-10">-0.76%</span>
            <span class="l-color-gray">最高价：</span><span class="l-margin-10">￥6.61</span><span class="l-color-gray">最低价：</span><span class="l-margin-10 l-margin-10">￥6.40</span>

        </p>
    </div>

    <!--买入USD-->
    <div class="l-content">
        <div class="l-usdt l-left-line">
            <p class="l-line">买入{{selectType}}</p>
            <a class="l-color-red">如何买入?</a>
            <div class="l-filed">
                <span class="l-label">买入估价CNY</span><span class="l-input">6.54</span>
            </div>

            <div class="l-filed l-border">
                <span class="l-label">买入量USDT</span><input class="l-input l-background-white">
            </div>

            <div class="l-filed l-border">
                <span class="l-label">金额CNY</span><input class="l-input l-background-white">
            </div>
            <div class="layui-form l-pay-content">
                <span>支付方式 <img src="./image/setter.png" alt="">：</span>
                <input type="checkbox" name="" title="支付宝" lay-skin="primary" >
                <input type="checkbox" name="" title="微信" lay-skin="primary" >
                <input type="checkbox" name="" title="银行转账" lay-skin="primary" >
                <a class="l-color-red" href="#">（必须本人支付）</a>
                <a href="#">《交易须知》</a>
            </div>
            <button class="layui-btn layui-btn-danger l-margin-top-10 layui-btn-fluid">买入（{{selectType}}->WTL）</button>
        </div>

        <div class="l-usdt">
            <p class="l-line">卖出{{selectType}}</p>
            <a class="l-color-red">如何卖出?</a>
            <div class="l-filed">
                <span class="l-label">卖出估价CNY</span><span class="l-input">6.54</span>
            </div>

            <div class="l-filed l-border">
                <span class="l-label">卖出量USDT</span><input class="l-input l-background-white">
            </div>

            <div class="l-filed l-border">
                <span class="l-label">金额CNY</span><input class="l-input l-background-white">
            </div>
            <div class="layui-form l-pay-content">
                <span>支付方式 <img src="./image/setter.png" alt="">：</span>
                <input type="checkbox" name="" title="支付宝" lay-skin="primary" >
                <input type="checkbox" name="" title="微信" lay-skin="primary" >
                <input type="checkbox" name="" title="银行转账" lay-skin="primary" >
                <a class="l-color-red" href="#">（必须本人支付）</a>
                <a href="#">《交易须知》</a>
            </div>
            <button class="layui-btn layui-btn-fluid l-margin-top-10">卖出（{{selectType}}->WTL）</button>
        </div>
    </div>

    <div class="layui-form l-table-info l-margin-top-10">
        <p class="l-table-info-center">市场挂单（只是显示在线商家）</p>
        <div class="l-switch-content">
            <input type="checkbox" name="yyy" lay-skin="switch"  checked>
            <span class="l-margin-left-5">只显示市场挂单</span>
        </div>
    </div>

    <div class="l-lay-table">
        <!--实时刷新的表格-->
        <table class="layui-table" lay-skin="line">
            <colgroup>
                <col width="70">
                <col width="120">
                <col width="140">
                <col width="120">
                <col width="200">
                <col>
                <col>
                <col>
                <col>
                <col width="100">
            </colgroup>
            <thead>
            <tr class="l-table-header">
                <th>类型</th>
                <th>价格（CNY）</th>
                <th>数量（USDT）</th>
                <th>总计（CNY）</th>
                <th>交易限额（USDT）</th>
                <th>商家在线</th>
                <th>成交单数</th>
                <th>平均用时</th>
                <th>付款方式</th>
                <th></th>
            </tr>
            </thead>
            <tbody class="l-table-body">
            <tr>
                <td>卖出</td>
                <td>6.24</td>
                <td>27790.0000</td>
                <td>181746.60</td>
                <td>500.00~7000.00</td>
                <td>李**2分钟</td>
                <td>276</td>
                <td>1分钟</td>
                <td>
                    <img src="./image/bankcard.png" alt="无法显示">
                    <img src="./image/zhifubao.png" alt="无法显示">
                </td>
                <td>
                    <button class="layui-btn layui-btn-sm l-btn-sm">买入</button>
                </td>
            </tr>
            <tr>
                <td>卖出</td>
                <td>6.24</td>
                <td>27790.0000</td>
                <td>181746.60</td>
                <td>500.00~7000.00</td>
                <td>李**2分钟</td>
                <td>276</td>
                <td>1分钟</td>
                <td>
                    <img src="./image/zhifubao.png" alt="无法显示">
                </td>
                <td>
                    <button class="layui-btn layui-btn-sm l-btn-sm">买入</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!--底部-->
<!--<div class="l-footer">-->
    <!--<div class="l-footer-content">-->
        <!--<div class="l-footer-nav">-->
            <!--<a class="l-footer-nav-item">关于我们</a>-->
            <!--<a class="l-footer-nav-item">联系我们</a>-->
            <!--<a class="l-footer-nav-item">团队介绍</a>-->
            <!--<a class="l-footer-nav-item">诚聘英才</a>-->
            <!--<a class="l-footer-nav-item">官方公告</a>-->
            <!--<a class="l-footer-nav-item">行业资讯</a>-->
            <!--<a class="l-footer-nav-item">帮助中心</a>-->
            <!--<a class="l-footer-nav-item">新手引导</a>-->
        <!--</div>-->

        <!--<p>+0031-655-866666（英文服务7*24小時）<a href="#">在线咨询</a><a href="#">问题反馈</a></p>-->
        <!--<p>客服邮箱：hrexvip@hotmail.com</p>-->
        <!--<p>公司地址：荷兰Teisterbantstraat 44,6825CL 阿纳姆</p>-->
    <!--</div>-->
<!--</div>-->

<div class="l-footer">
    <div class="l-footer-logo">
        <img src="./image/WTL__logo_en.png" alt="无法显示">
        <p>water chanin</p>
    </div>
    <div class="l-footer-content">
        <p class="l-footer-info"><span>Business Cooperation：wtlcoin@163.com</span> <span>Copyright © 2017 w-wtc</span></p>
        
        <div class="l-footer-imgList">
            <img src="./image/logo01.png" alt="无法显示">
            <img src="./image/logo02.png" alt="无法显示">
            <img src="./image/logo03.png" alt="无法显示">
            <img src="./image/logo04.png" alt="无法显示">
            <img src="./image/logo05.png" alt="无法显示">
            <img src="./image/logo07.png" alt="无法显示">
            <img src="./image/logo08.png" alt="无法显示">
        </div>
    </div>
</div>

</body>
<script src="./layui/layui.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/useModel.js"></script>
</html>